<template>
  <!--组件下面的大div-->
  <div id="main">
    <!--element容器-->
    <el-container style="height: 100%">
      <!--头部div-->
      <el-header>
        <!--项目标题左边的logo-->
        <div class="yuan">
          <img
              style="width: 100%; height: 100%; border-radius: 50%"
              src="../assets/logo.png"
          />
        </div>
        <!--项目标题-->
        <p class="p1">点餐后台</p>
        <!--你自己的class-->
        <div class="yourself">
<!--          <el-button type="primary" @click="dialogVisible = true">申请人</el-button>-->
          <el-button @click="clickAddbrand()" type="primary">申请人</el-button>
          <!--自己的圆-->
          <div class="self yuan">
            <!-- el下拉 触发方式为单击-->
            <el-dropdown trigger="click">
              <img
                  style="width: 100%; height: 100%; border-radius: 50%"
                  src="../assets/logo.png"
              />
              <!--el下拉菜单显示的内容-->
              <el-dropdown-menu slot="dropdown">
                <!--这块被注释掉了 <el-dropdown-item>个人中心</el-dropdown-item>-->
                <el-dropdown-item>
                  <!-- 这块地方用a标签包着进不去方法,用i或者p,i会有标签-->
                  <p @click="exit">退出</p>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="selfshow">
            <p>欢迎您，店家！！{{ user.name }}</p>
            <!--日期组件-->
            <p>{{ nowDate + " " + nowTime + " " + nowWeek }}</p>
          </div>
        </div>
      </el-header>
      <el-container>
        <!--el左边,宽度设置为200px-->
        <el-aside width="200px">
          <!--element的导航菜单-->
          <!-- default-active是默认打开哪个路由,等于2就是默认打开2路由 -->
          <el-menu
              class="el-menu-vertical-demo"
              background-color="#333744"
              text-color="white"
              router
              active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-platform"></i>
                <span>店铺管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/main/canpin">
                  <i class="el-icon-tableware"></i>
                  菜品管理
                </el-menu-item>
                <el-menu-item index="/main/order">
                  <i class="el-icon-s-order"></i>
                  订单管理
                </el-menu-item>
                <el-menu-item index="/main/user">
                  <i class="el-icon-user"></i>
                  用户管理
                </el-menu-item>
                <el-menu-item index="/main/staff">
                  <i class="el-icon-user-solid"></i>
                  员工管理
                </el-menu-item>
                <el-menu-item index="/main/coupon">
                  <i class="el-icon-s-ticket"></i>
                  优惠券管理
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!--嵌套路由-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
<!--    弹出框-->
    <div>
      <el-dialog title="申请人" :visible.sync="isScroll" :close-on-click-modal="false" width="35%">
        <el-table :data="commodityList" style="width: 100%">
          <el-table-column label="序号" prop="id"  width="50"></el-table-column>
          <el-table-column label="姓名" prop="name"  width="90"></el-table-column>
          <el-table-column label="邮箱" prop="email"  width="100"></el-table-column>
          <el-table-column label="手机号" prop="phone"  width="100"></el-table-column>
          <el-table-column label="操作" >
            <template v-slot="s" >
              <el-button type="primary" @click="clickAdd(s.row.id)">同意</el-button>
              <el-button type="primary" @click="clickDelBtn(s.row.id)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      per: [],
      nowDate: "",
      nowTime: "",
      nowWeek: "",
      data: "",
      defaultPops: {
        children: "children",
        label: "name",
      },
      commodityList: {
        id:'',
        name:'',
        email:'',
        phone:''
      },
      dialogVisible: false,
      isScroll:false,
    };
  },
  methods: {
    usernamemothods() {
      this.user = JSON.parse(sessionStorage.getItem("login"));
      this.$axios.get('http://127.0.0.1:8081/roles/getfindrolesper', {params: {id: this.user.role}}).then(res => {
        console.log(res.data + "11111111111111111111111")
        for (const i in res.data) {
          this.per.push(res.data[i]);
        }
      })
    },
    clickAddbrand(){
      this.isScroll=true
      this.$axios.get("http://localhost:9527/backstagesupporter/main/hfregister").then(res=>{
        this.commodityList=res.data.data;
      })
    },
    clickAdd(id) {
      this.$axios.get("http://localhost:9527/backstagesupporter/main/hfRegister",{params:{id:id}}).then(res=>{
        this.$message({message:'同意申请',type:'success',showClose:true})
        this.clickAddbrand()
      })
    },
    clickDelBtn(id) {
      this.$axios.get("http://localhost:9527/backstagesupporter/main/updRegister",{params:{id:id}}).then(res=>{
        this.$message({message:'拒绝申请',type:'success',showClose:true})
        this.clickAddbrand()
      })
    },
    //退出方法
    exit() {
      const token = sessionStorage.getItem("token");

      this.$axios.get("http://127.0.0.1:8081/user/getdeletetoken", {
        params: {
          tokenname: token,
        },
      });
      //清除session
      sessionStorage.setItem("token", null);
      sessionStorage.removeItem("login");
      //对对对
      this.$router.push("/login");
    },
    currentTime() {
      setInterval(this.getDate, 1000);
    },
    getDate: function () {
      var _this = this;
      const yy = new Date().getFullYear();
      const mm = new Date().getMonth() + 1;
      const dd = new Date().getDate();
      const week = new Date().getDay();
      const hh = new Date().getHours();
      const mf =
          new Date().getMinutes() < 10
              ? "0" + new Date().getMinutes()
              : new Date().getMinutes();
      const ms =
          new Date().getSeconds() < 10
              ? "0" + new Date().getSeconds()
              : new Date().getSeconds();
      if (week === 1) {
        this.nowWeek = "星期一";
      } else if (week === 2) {
        this.nowWeek = "星期二";
      } else if (week === 3) {
        this.nowWeek = "星期三";
      } else if (week === 4) {
        this.nowWeek = "星期四";
      } else if (week === 5) {
        this.nowWeek = "星期五";
      } else if (week === 6) {
        this.nowWeek = "星期六";
      } else {
        this.nowWeek = "星期日";
      }
      _this.nowTime = hh + ":" + mf + ":" + ms;
      _this.nowDate = yy + "/" + mm + "/" + dd;
    },
  },
  mounted() {
    this.currentTime();
    // this.usernamemothods();
  },
  // 销毁定时器
  beforeDestroy: function () {
    if (this.getDate) {
      console.log("销毁定时器");
      clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
};
</script>
<style lang='scss' scoped>
/*最外层背景色。 字体颜色*/
.el-aside {
  background-color: #333744;
  .el-menu {
    border: none;
  }
}
.el-main {
  background-color: #eaedf1;
}
.iconfont{
  margin-right: 10px;
}
.toggle-button {
  background-color: #4A5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  // 鼠标放上去变成小手
  cursor: pointer;
}
.el-dropdown-menu {
  top: 50px !important;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.el-submenu {
  text-align: left !important;
}
.el-col-12 {
  width: 100%;
}
.selfshow {
  float: left !important;
  color: white;
  height: 60px;
  p {
    line-height: 20px;
    padding-top: 7px;
    text-align: left;
  }
}
.self {
  margin-right: 20px;
}
.yourself {
  float: right;
  margin-right: 100px;
}
.yuan {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  margin-top: 5px;
  float: left;
  cursor: pointer;
}
#main {
  height: 100%;
  width: 100%;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #333743;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
body > .el-container {
  margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.p1 {
  text-align: left;
  font-size: 20px;
  color: white;
  padding-left: 20px;
  width: 200px;
  float: left;
}
.el-header {
  background: #373c3f;
}
.el-menu {
  background: none;
}
.router-link-active {
  color: #409eff;
}
.el-menu-item i {
  color: #409eff;
}
.el-main {
  line-height: 0px !important;
}
.font{
  color:white;
}
</style>
